const ProFormText = (props) => {
  return (
    <ProForm.Item {. .props}>
      <Input placeholder={props.placeholder} {. .props.fieldProps} />
    </ProForm.Item
  );
};

<ProFormText name="text" label="Name" placeholder="Please enter a name" fieldProps={inputProps} />

<ProFormCaptcha
  fieldProps={{
    size: 'large',
    prefix: <MailTwoTone />,
  }}
  captchaProps={{
    size: 'large',
  }}
  // The name of the phone number, which is injected by onGetCaptcha
  phoneName="phone"
  name="captcha"
  rules={[
    {
      required: true,
      message: 'Please enter the verification code',
    },
  ]}
  placeholder="Please enter a captcha"
  // If you need to fail, you can throw an error and onGetCaptcha will stop automatically
  // throw new Error("Error getting captcha")
  onGetCaptcha={async (phone) => {
    await waitTime(1000);
    message.success(`phone number ${phone} Verification code sent successfully! `);
  }}
/>

<ProFormText.Password label="InputPassword" name="input-password" />

<ProFormDatePicker name="date" label="date" />

<ProFormDateTimePicker name="datetime" label="datetime" />

<ProFormDateRangePicker name="dateRange" label="date" />

<ProFormDateTimeRangePicker name="datetimeRange" label="datetime" />

<ProFormDateRangePicker name="time" label="time" />

<ProFormTextArea
  name="text"
  label="name"
  placeholder="Please enter a name"
  fieldProps={inputTextAreaProps}
/>

<ProFormCheckbox.Group
  name="checkbox"
  layout="vertical"
  label="Industry Distribution"
  options={['Agriculture', 'Manufacturing', 'Internet']}
/>

<ProFormRadio.Group
  name="radio-group"
  label="Radio.Group"
  options={[
    {
      label: 'item 1',
      value: 'a',
    },
    {
      label: 'item 2',
      value: 'b',
    },
    {
      label: 'item 3',
      value: 'c',
    },
  ]}
/>

<ProFormSwitch name="switch" label="Switch" />

<ProFormRate name="rate" label="Rate" />

<ProFormSlider
  name="slider"
  label="Slider"
  marks={{
    0: 'A',
    20: 'B',
    40: 'C',
    60: 'D',
    80: 'E',
    100: 'F',
  }}
/>

<ProFormUploadDragger label="Dragger" name="dragger" action="upload.do" />

<ProFormUploadButton label="upload" name="upload" action="upload.do" />

<>
  <ProFormSelect
    name="select"
    label="Select"
    valueEnum={{
      open: 'Unresolved',
      closed: 'Resolved',
    }}
    placeholder="Please select a country"
    rules={[{ required: true, message: 'Please select your country!' }]}
  />

  <ProFormSelect
    name="select2"
    label="Select"
    request={async () => [
      { label: 'all', value: 'all' }
      { label: 'Unresolved', value: 'open' }
      { label: 'Resolved', value: 'closed' }
      { label: 'Resolving', value: 'processing' },
    ]}
    placeholder="Please select a country"
    rules={[{ required: true, message: 'Please select your country!' }]}
  />
</>

<ProFormSelect
  name="select"
  label="Select"
  options={[
    { label: '全部', value: 'all' },
    { label: '未解决', value: 'open' },
    { label: '已解决', value: 'closed' },
    { label: '解决中', value: 'processing' },
  ]}
  fieldProps={{
    optionItemRender(item) {
      return item.label + ' - ' + item.value;
    },
  }}
  placeholder="Please select a country"
  rules={[{ required: true, message: 'Please select your country!' }]}
/>

<ProFormTreeSelect
  name="name"
  placeholder="Please select"
  allowClear
  width={330}
  secondary
  request={async () => {
    return [
      {
        title: 'Node1',
        value: '0-0',
        children: [
          {
            title: 'Child Node1',
            value: '0-0-0',
          },
        ],
      },
      {
        title: 'Node2',
        value: '0-1',
        children: [
          {
            title: 'Child Node3',
            value: '0-1-0',
          },
          {
            title: 'Child Node4',
            value: '0-1-1',
          },
          {
            title: 'Child Node5',
            value: '0-1-2',
          },
        ],
      },
    ];
  }}
  // tree-select args
  fieldProps={{
    showArrow: false,
    filterTreeNode: true,
    showSearch: true,
    dropdownMatchSelectWidth: false,
    labelInValue: true,
    autoClearSearchValue: true,
    multiple: true,
    treeNodeFilterProp: 'title',
    fieldNames: {
      label: 'title',
    },
  }}
/>

<ProFormDigit label="InputNumber" name="input-number" min={1} max={10} />

<ProFormDigit
  label="InputNumber"
  name="input-number"
  min={1}
  max={10}
  fieldProps={{ precision: 0 }}
/>

<ProFormMoney
  label="The minimum limit is 0"
  name="amount1"
  locale="en-US"
  initialValue={22.22}
  min={0}
/>
<ProFormMoney
  label="There is no limit to the amount size"
  name="amount2"
  locale="en-GB"
  initialValue={22.22}
/>
<ProFormMoney
  label="Currency symbols follow global internationalization"
  name="amount3"
  initialValue={22.22}
/>
<ProFormMoney
  label="Custom currency symbols"
  name="amount4"
  initialValue={22.22}
  customSymbol="💰"
/>

{
"ar-EG": "$",
"zh-CN": "¥",
"en-US": "$",
"en-GB": "£",
"vi-VN": "₫",
"it-IT": "€",
"ja-JP": "¥",
"es-ES": "€",
"ru-RU": "₽",
"sr-RS": "RSD",
"ms-MY": "RM",
"zh-TW": "NT$"
"fr-FR": "€",
"pt-BR": "R$",
"ko-KR": "₩",
"id-ID": "RP",
"de-DE": "€",
"fa-IR": "تومان",
"tr-TR": "₺",
"pl-PL": "zł",
"hr-HR": "kn",
}